<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="animate.css"/>
		<link rel="stylesheet" href="animate.min.css" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		// 创建点击控制框
			var div = document.createElement('div');
			var span = document.createElement('span');
			document.body.appendChild(div);
			div.style.height = '30px';
			div.style.width = '100px';
			// div.style.border = '1px solid red';
			div.style.position = 'absolute';
			div.style.top = '360px';
			div.style.left = 'calc(50% - 50px)';
			div.zIndex = '10';
			div.appendChild(span);
			div.insertAdjacentHTML('afterbegin','<span></span>');
			div.insertAdjacentHTML('afterbegin','<span></span>');
			var spans = div.querySelectorAll('span');
			spans[0].style.display = 'inline-block';
			spans[0].style.height = '10px';
			spans[0].style.width = '10px';
			spans[0].style.backgroundColor = 'red';
			spans[0].style.borderRadius = '50%';
			// 
			spans[1].style.display = 'inline-block';
			spans[1].style.height = '10px';
			spans[1].style.width = '10px';
			spans[1].style.backgroundColor = 'white';
			spans[1].style.borderRadius = '50%';
			// 
			spans[2].style.display = 'inline-block';
			spans[2].style.height = '10px';
			spans[2].style.width = '10px';
			spans[2].style.backgroundColor = 'white';
			spans[2].style.borderRadius = '50%';
			
			div.style.display = 'flex';
			div.style.justifyContent = 'space-around';
			div.style.alignItems = 'center';
			
			
			
			// 添加img图片
			div.insertAdjacentHTML('beforeBegin','<img src="1.png" alt="" />');
			div.insertAdjacentHTML('beforeBegin','<img src="2.png" alt="" />');
			div.insertAdjacentHTML('beforeBegin','<img src="3.png" alt="" />');
			// 对img图片进行样式修改
			var imgs = document.querySelectorAll('img');
			for (var i = 0; i < imgs.length; i++) {
				var img = imgs[i]
				img.style.position = 'absolute';
			    img.style.height = '400px';
			    img.style.width = '800px';
			    img.style.top = '10px';
			    img.style.left = 'calc(50% - 400px)';
			}
			imgs[1].style.display = 'none';
			imgs[2].style.display = 'none';
			
			// 点击事件
			spans[0].onclick = function(){
				imgs[0].style.display = 'inline-block';
				imgs[1].style.display = 'none';
			    imgs[2].style.display = 'none';
			    spans[0].style.backgroundColor = 'red';
			    spans[1].style.backgroundColor = 'white';
			    spans[2].style.backgroundColor = 'white';
			}
			spans[1].onclick = function(){
				imgs[1].style.display = 'inline-block';
				imgs[0].style.display = 'none';
			    imgs[2].style.display = 'none';
			    spans[0].style.backgroundColor = 'white';
			    spans[1].style.backgroundColor = 'red';
			    spans[2].style.backgroundColor = 'white';
			}
			spans[2].onclick = function(){
				imgs[2].style.display = 'inline-block';
				imgs[1].style.display = 'none';
			    imgs[0].style.display = 'none';
			    spans[0].style.backgroundColor = 'white';
			    spans[1].style.backgroundColor = 'white';
			    spans[2].style.backgroundColor = 'red';
			}
		</script>
		
	</body>
</html>
